import { getCuesTopicPage } from '@/services/api/api-county';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { Space, Tag, Typography, message } from 'antd';
import moment from 'moment';
import React, { useEffect, useRef } from 'react';
import { useAccess } from 'umi';
import DetailsTopic from '../DetailsCounty/DetailsTopic';

interface TableTopicProps {
  // actionRef: ActionType;
  onDetails: (id: string, name: string) => void;
  countyKey: string
}

const TableTopic: React.FC<TableTopicProps> = (props) => {
  const { onDetails, countyKey } = props;
  const access = useAccess();
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<Cues.TopicPage>[] = [
    {
      title: '状态',
      dataIndex: 'run',
      key: 'run',
      width: '80px',
      align: 'center',
      search: false,
      render: (_, row) => (
        <Tag color={row.run === 1 ? 'green' : row.run === 2 ? 'red' : 'orange'}>
          {row.run === 1 ? '进行中' : row.run === 2 ? '已结束' : '已暂停'}
        </Tag>
      ),
    },
    {
      title: '状态',
      dataIndex: 'run',
      key: 'run',
      hideInTable: true,
      valueType: 'select',
      valueEnum: {
        1: { text: '进行中' },
        2: { text: '已结束' },
        3: { text: '已暂停' },
      },
    },
    {
      title: '发布单位',
      dataIndex: 'createdOrganizationName',
      key: 'createdOrganizationName',
      valueType: 'avatar',
      width: '150px',
      align: 'center',
      search: false,
      render: (dom, record) => {
        return (
          <Typography.Text ellipsis={true} type="secondary">
            {record.createdOrganizationName}
          </Typography.Text>
        );
      },
    },
    {
      title: '选题主题',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
      copyable: true,
      width: '300px',
      align: 'center',
      render: (dom, record) => {
        return (
          <div
            style={{
              textAlign: 'left',
              textOverflow: 'ellipsis',
              whiteSpace: "nowrap",
              overflow: 'hidden'
            }}
          >
            <DetailsTopic
              table='active'
              id={record.id}
              countyKey={countyKey}
              name={record.name}
              onRefurbish={() => {
                actionRef?.current?.reload();
              }}
            />
          </div>
        );
      },
    },
    {
      title: '选题计划',
      dataIndex: 'countTopicPlan',
      key: 'countTopicPlan',
      width: '80px',
      search: false,
      align: 'center',
      //   hideInTable: !access.线索上报x选题计划x计划列表x创建计划x多条选题计划
    },
    {
      //   hideInSearch: access.线索上报x选题计划x配置x提供者,
      //   hideInTable: access.线索上报x选题计划x配置x提供者,
      title: '报送单位',
      dataIndex: 'countSubmitOrganization',
      key: 'countSubmitOrganization',
      width: '80px',
      search: false,
      align: 'center',
    },
    {
      title: '报送线索',
      dataIndex: 'countSubmit',
      key: 'countSubmit',
      width: '80px',
      search: false,
      align: 'center',
    },
    {
      title: '截止日期',
      key: 'deadline',
      dataIndex: 'deadline',
      width: '120px',
      align: 'center',
      search: false,
    },
    {
      title: '创建时间',
      dataIndex: 'createdTime',
      key: 'createdTime',
      width: '120px',
      align: 'center',
      search: false,
    },
    {
      //   hideInSearch: access.线索上报x选题计划x配置x需求者,
      //   hideInTable: access.线索上报x选题计划x配置x需求者,
      title: '查看',
      dataIndex: 'isView',
      key: 'isView',
      width: '80px',
      align: 'center',
      hideInSearch:true,
      valueType: 'select',
      valueEnum: {
        0: { text: '未查看' },
        1: { text: '已查看' },
      },
      render: (_, record) => (
        <Space>
          <Tag color={record.isView === 0 ? '#DD5246' : '#1AA15F'} key="isView">
            {record.isView === 0 ? '未查看' : '已查看'}
          </Tag>
        </Space>
      ),
    },
    {
      //   hideInSearch: access.线索上报x选题计划x配置x需求者,
      //   hideInTable: access.线索上报x选题计划x配置x需求者,
      title: '报送',
      dataIndex: 'isSubmit',
      key: 'isSubmit',
      width: '80px',
      align: 'center',
      hideInSearch:true,
      valueType: 'select',
      valueEnum: {
        0: { text: '未报送' },
        1: { text: '已报送' },
      },
      render: (_, record) => (
        <Space>
          <Tag color={record.isSubmit === 0 ? '#FCD053' : '#1AA15F'} key="isSubmit">
            {record.isSubmit === 0 ? '未报送' : '已报送'}
          </Tag>
        </Space>
      ),
    },
    {
      title: '截止日期',
      key: 'deadlines',
      valueType: 'dateRange',
      hideInTable: true,
      fieldProps: {
        allowClear: true,
        placeholder: ['开始日期', '结束日期'],
        format: 'YYYY-MM-DD',

        ranges: {
          今日: [moment(), moment()],
          本月: [moment().startOf('month'), moment().endOf('month')],
          上月: [
            moment().startOf('month').subtract(1, 'months'),
            moment().endOf('month').subtract(1, 'months'),
          ],
          最近7天: [moment().subtract(6, 'days'), moment()],
          最近60天: [moment().subtract(59, 'days'), moment()],
          最近90天: [moment().subtract(89, 'days'), moment()],
        },
      },
    },
    {
      title: '创建日期',
      key: 'createdTimes',
      valueType: 'dateRange',
      hideInTable: true,
      fieldProps: {
        allowClear: true,
        placeholder: ['开始日期', '结束日期'],
        format: 'YYYY-MM-DD',
        ranges: {
          今日: [moment(), moment()],
          本月: [moment().startOf('month'), moment().endOf('month')],
          上月: [
            moment().startOf('month').subtract(1, 'months'),
            moment().endOf('month').subtract(1, 'months'),
          ],
          最近7天: [moment().subtract(6, 'days'), moment()],
          最近60天: [moment().subtract(59, 'days'), moment()],
          最近90天: [moment().subtract(89, 'days'), moment()],
        },
      },
    },
  ];

  /**
   * 请求网络
   * @param value
   */
  const request = async (params = {}) => {
    const response = await getCuesTopicPage({ ...params, countyKey });
    return Promise.resolve({
      data: response.data.data,
      total: response.data.total,
      success: response.code === 0,
    });
  };
  useEffect(() => {
    actionRef.current?.reset()
    console.log(countyKey);
    
  }, [countyKey])
  return (
    <ProTable<CuesTopicData.TopicPage>
      columns={columns}
      actionRef={actionRef}
      request={request}
      rowKey="id"
      dateFormatter="string"
      bordered
      search={{
        defaultCollapsed: false,
        span: 8,
        labelWidth: 'auto',
      }}
      sticky
      // scroll={{
      //   x: '1300px',
      // }}
      pagination={{
        showQuickJumper: true,
        showSizeChanger: true,
        defaultPageSize: 20,
      }}
    />
  );
};

export default TableTopic;
